<template>
  <!-- 商品参数组件 -->
  <div>
    <el-form :model="form" label-width="130px" ref="form" style="margin-top: -12px;">
      <el-form-item :label="lableTitle" class="one-label">
        <!-- 保障 -->
        <div class="span-bar" v-if="fromListPage == 30">
          <div class="flex">
            <span class="mar-r-10 font-14 font-gray">保障名称 / 保障值</span>
          </div>
          <div class="flex pad-b-22" v-for="(safeguard, index) in form.goodsSafeguards" :key="index">
            <el-input v-model="safeguard.safeguardName" placeholder="保障名称" class="short-input-2 mar-r-10" maxlength="10" show-word-limit/>
            <el-input v-model="safeguard.safeguardValue" placeholder="保障值" class="long-input-3 mar-r-10" maxlength="50" show-word-limit/>
            <el-button class="remove-btn" @click="delSafeguard(safeguard, index)">
              <svg-icon class="font-16 font-w" icon-class="del" />
            </el-button>
          </div>
          <el-button @click="addSafeguard()">
            <svg-icon class="font-w" icon-class="add" />
            <span>添加保障</span>
          </el-button>
        </div>
        <!-- 参数 -->
        <div class="span-bar">
          <div class="flex">
            <span class="mar-r-10 font-14 font-gray">参数名称 / 参数值</span>
          </div>
          <div class="flex pad-b-22" v-for="(parameter, index) in form.goodsParameters" :key="index">
            <el-input v-model="parameter.parameterName" placeholder="参数名称" class="short-input-2 mar-r-10" maxlength="10" show-word-limit/>
            <el-input v-model="parameter.parameterValue" placeholder="参数值" class="long-input-3 mar-r-10" maxlength="50" show-word-limit/>
            <el-button class="remove-btn" @click="delParameter(parameter, index)">
              <svg-icon class="font-16 font-w" icon-class="del" />
            </el-button>
          </div>
          <el-button @click="addParameter()">
            <svg-icon class="font-w" icon-class="add" />
            <span>添加参数</span>
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { pageGetPropertyList } from '@/api/goods/enterpriseGoodsCategory'

  export default {
    props: {
      // 跳转源 30：零售 31：批发
      fromListPage: {
        type: Number,
        default: 30
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    data() {
      return {
        // 标题名称
        lableTitle: '保障/参数设置',
        form: {
          // 参数列表
          goodsParameters: [],
          // 商品保障列表
          goodsSafeguards: [],
          goodsId: ''
        }
      }
    },
    created() {},
    mounted() {
      this.initForm()
      if (this.fromListPage === 31) {
        this.lableTitle = '参数设置'
      }
    },
    methods: {
      // 初始化表单
      initForm() {
        if (this.goodsObj.goodsId) {
          this.form.goodsId = this.goodsObj.goodsId
          this.form.goodsParameters = this.goodsObj.goodsParameters
          this.form.goodsSafeguards = this.goodsObj.goodsSafeguards
        } else {
          this.$bus.$on('goods.edit.categoryId', this.doChangeByCategoryId)
          this.$bus.$on('goods.edit.wholesaleCategoryId', this.doChangeByCategoryId)
        }
      },
      // 分类切换事件
      doChangeByCategoryId(categoryId) {
        if (!categoryId) {
          return
        }
        pageGetPropertyList({
          categoryId: categoryId
        }).then(response => {
          if (response.isError) return
          this.form.goodsParameters = []
          response.data.records.forEach(p => {
            if (p.propertyType === 1) {
              const obj = {
                parameterName: p.propertyName,
                parameterValue: p.propertyValue
              }
              this.form.goodsParameters.push(obj)
            }
          })
        })
      },
      // 添加参数
      addParameter() {
        const obj = {
          parameterName: '',
          parameterValue: ''
        }
        this.form.goodsParameters.push(obj)
      },
      // 删除参数
      delParameter(parameter, index) {
        this.form.goodsParameters.splice(index, 1)
      },
      // 添加保障
      addSafeguard() {
        const obj = {
          safeguardName: '',
          safeguardValue: ''
        }
        this.form.goodsSafeguards.push(obj)
      },
      // 删除保障
      delSafeguard(safeguard, index) {
        this.form.goodsSafeguards.splice(index, 1)
      },
      // 表单校验 true：成功 false：失败
      checkForm() {
        // not do
        return true
      },
      // 提交表单
      submitForm() {
        // 去空
        this.form.goodsParameters.forEach(item => {
          item.parameterName = item.parameterName.trim()
          item.parameterValue = item.parameterValue.trim()
        })
        this.form.goodsSafeguards.forEach(item => {
          item.safeguardName = item.safeguardName.trim()
          item.safeguardValue = item.safeguardValue.trim()
        })
        const submitForm = {
          goodsParameters: this.form.goodsParameters,
          goodsSafeguards: this.form.goodsSafeguards
        }
        return submitForm
      }
    }
  }
</script>

<style lang="less" scoped>
  .span-bar {
    padding: 0 50px;
    float: left;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input-3 {
    width: 60%;
  }

  .short-input-2 {
    width: 40%;
  }
</style>